<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      autocomplete="off"
    >
      <div v-if="active == 0" class="Rtitle">
        <el-form-item label="商家账号" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入账号" />
        </el-form-item>

        <el-form-item label="密码" prop="pwd">
          <el-input
            v-model="ruleForm.pwd"
            type="password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="cpwd">
          <el-input
            v-model="ruleForm.cpwd"
            type="password"
            placeholder="请确认密码"
          />
        </el-form-item>
        <el-form-item label="商铺名字" prop="shopname">
          <el-input
            v-model="ruleForm.shopname"
            type="text"
            placeholder="请输入商铺名字"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <div class="b">
            <el-input
              v-model="ruleForm.code"
              maxlength="6"
              placeholder="请输入验证码"
            />
            <el-button size="mini" round @click="sendMsg" class="status">{{
              statusMsg
            }}</el-button>
          </div>
        </el-form-item>
      </div>
      <div class="footer">
        <el-button type="primary" class="dianji" @click="register"
          >点击注册</el-button
        >
        <div class="error">{{ error }}</div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msgcode: null,
      step: 2,
      active: 0,
      statusMsg: "发送验证码",
      error: "",
      ruleForm: {
        name: "",
        code: "",
        pwd: "",
        cpwd: "",
        email: "",
        shopname: "",
      },
      rules: {
        name: [
          {
            required: true,
            type: "string",
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "创建密码",
            trigger: "blur",
          },
        ],
        shopname: [
          {
            required: true,
            message: "请输入商铺名字",
            trigger: "blur",
          },
        ],
        cpwd: [
          {
            required: true,
            message: "确认密码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.ruleForm.pwd) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  layout: "blank",
  methods: {
    sendMsg() {
      const self = this;
      let emailPass;
      if (self.timerid) {
        return false;
      }
      this.$refs["ruleForm"].validateField("email", (valid) => {
        emailPass = valid;
      });
      // 模拟验证码发送
      if (!emailPass) {
        let count = 60;
        self.timerid = setInterval(function () {
          self.statusMsg = `${--count}秒`;
          if (count === 0) {
            self.statusMsg = "重新发送";
            clearInterval(self.timerid);
            self.timerid = false;
          }
        }, 1000);
      }
      let url = `stroll/email?email=${this.ruleForm.email}`;
      this.axios.get(url).then((res) => {
        this.msgcode = res.data.code;
      });
    },
    next() {
      if (this.active === 0) {
        this.$refs["ruleForm"].validateField("agreed", (valid) => {
          if (valid === "") {
            this.active++;
          }
        });
      }
    },
    prev() {
      if (--this.active < 0) this.active = 0;
    },
    // 模拟登录
    register() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let url = "stroll/register";
          let shopid = Math.floor(Math.random() * 100000);
          let data = `user=${this.ruleForm.name}&pwd=${this.ruleForm.pwd}&email=${this.ruleForm.email}&user_name=${this.ruleForm.shopname}&shopid=${shopid}`;
          if (this.ruleForm.code == this.msgcode) {
            this.axios.post(url, data).then((res) => {
              if (res.data.msg) {
                this.$message("该账号已被注册");
              } else {
                this.$message("注册成功");
                window.location.reload();
              }
            });
          } else {
            this.$message("验证码不正确");
          }
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" >
.el-input__inner {
  color: white;
}
.dianji {
  margin-top: 30px;
  background-color: transparent;
  color: #39f;
  width: 200px;
  border-radius: 30px;
}
.b {
  display: flex;
}
.Rtitle .el-form-item input {
  background-color: transparent;
}
.Rtitle .el-form-item label {
  color: #fff;
}
#loginBox {
  text-align: center;
  width: 400px;
  height: 470px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 0.8;
  background: linear-gradient(
    230deg,
    rgba(53, 57, 74, 0) 0%,
    rgb(0, 0, 0) 100%
  );
}

.page-register {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: #242645;
  background-size: 100%;
  background-image: url("../../assets/img/login/b2.jpg");
  .header {
    margin-bottom: 20px;
    border-bottom: 2px solid rgb(235, 232, 232);
    min-width: 350px;
    color: #fff;
    text-align: center;

    header {
      margin: 0 auto;

      padding: 10px 0;
      width: 350px;

      .login {
        float: right;
      }

      .bold {
        font-style: normal;
      }
    }
  }

  .register {
    color: #1890ff;
  }

  a {
    color: #1890ff;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color 0.3s;
  }

  > section {
    margin: 0 auto 30px;
    padding-top: 30px;
    width: 980px;
    min-height: 300px;
    padding-right: 550px;
    box-sizing: border-box;
    text-align: center;

    .status {
      font-size: 12px;
      margin-left: 20px;
      color: #e6a23c;
    }

    .error {
      color: red;
    }
  }

  .footer {
    text-align: center;
  }
}
</style>
